<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Element Plus Vite Starter</title>
</head>

<body>
  <div id="app">
    <div class="jLoader_container">
      <div class="jLoader_title_left jLoader_div_flex">智慧医疗 - </div>
      <div class="jLoader_title_right jLoader_div_flex">
        <span class="jLoader_content">触手可得</span>
      </div>
      <p class="jLoader_p">中电信·翼康科技有限公司</p>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>
<style lang="scss">
  body {
    margin: 0;
  }

  .jLoader_container {
    text-align: center;
    background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
    color: #555;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 32px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0, 0, 0);
  }

  .jLoader_div_flex {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
  }

  .jLoader_title_left {
    animation: showup 3s infinite;
  }

  .jLoader_title_right {
    width: 0px;
    animation: reveal 3s infinite;
  }

  .jLoader_content {
    margin-left: 0;
    animation: slidein 3s infinite;
  }

  @keyframes showup {
    0% {
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes slidein {
    0% {
      margin-left: -800px;
    }

    20% {
      margin-left: -800px;
    }

    70% {
      margin-left: 0px;
    }

    100% {
      margin-left: 0px;
    }
  }

  @keyframes reveal {
    0% {
      opacity: 0;
      width: 0px;
    }

    20% {
      opacity: 1;
      width: 0px;
    }

    30% {
      width: 155px;
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      width: 155px;
    }
  }


  .jLoader_p {
    font-size: 12px;
    color: #999;
    margin-top: 200px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10vh;
  }
</style>